<template>
  <div class="my-header">
    <slot></slot>
    <input type="text" @input="inpChange" :value="value" @keydown.enter="add" />
  </div>
</template>
<script>
export default {
  // v-model是value和input
  props: ["value"],
  //接受父组件传来的value
  methods: {
    inpChange(e) {
      this.$emit("input", e.target.value);
      //   e.target.value  当前事件的目标的value值
    },
    add() {
      this.$emit("enter");
    },
  },
};
</script>
<style lang="scss">
.my-header {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: #ccc;
  input {
    width: 50%;
    height: 30px;
    border-radius: 5px;
  }
}
</style>
